<template>
  <div  v-if="visible" style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;" @click="hide">
    <div class="group-info" @click.stop>
      <div class="group-info-header">
        <el-input placeholder="搜索群成员" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="group-info-mid">
        <ul class="group-info-mid-member">
          <li class="group-info-mid-member-item" v-for="(member,i) in memberArr" :key="i">
            <img :src="member.avatar" :title="member.nickname">
          </li>
        </ul>
        <div class="group-info-mid-control">
          <div class="group-info-mid-control-add" title="添加" @click="changeMember(1)">
            <i class="el-icon-plus"></i>
          </div>
          <div v-if="ownerId === currentUser.id" class="group-info-mid-control-delete" title="移出" @click="changeMember(2)">
            <i class="el-icon-minus"></i>
          </div>
        </div>
      </div>
      <div class="group-info-bottom">
        <el-form>
          <el-form-item label="群聊名称">
            <el-input v-model="groupName" @blur="updateGroupName"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input placeholder="群聊的备注仅自己可见"></el-input>
          </el-form-item>
          <el-form-item label="我在本群的昵称">
            <el-input :value="currentUser.nickname"></el-input>
          </el-form-item>
          <el-form-item align="center" style="margin-top: 15px">
            <el-button type="danger" plain>退出群聊</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GroupInfo',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      groupName: '',
      visible: false,
      currentUser: this.$store.state.currentUser,
      memberArr: [],
      ownerId: 0
    }
  },
  mounted () {
  },
  methods: {
    show () {
      this.visible = true
      this.getGroupInfo()
    },
    hide () {
      this.visible = false
    },
    changeMember (type) {
      this.visible = false
      let info = {type}
      if (info.type === 1) {
        let users = this.$store.state.users
        info.users = []
        for (let i = 0; i < users.length; i++) {
          let j = 0
          for (; j < this.memberArr.length; j++) {
            if (users[i].id === this.memberArr[j].id) {
              break
            }
          }
          if (j === this.memberArr.length) {
            info.users.push(users[i])
          }
        }
      } else {
        info.users = this.memberArr
      }
      this.$emit('getInfo', info)
    },
    getGroupInfo () {
      let id = this.$props.id
      this.axios.get(`/api/v1/group/${id}`).then((response) => {
        if (response.data.code === 1) {
          this.ownerId = response.data.data.ownerId
          this.groupName = response.data.data.name
          this.memberArr = response.data.data.groupMemberList
        } else {
          this.$message.error(response.data.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    updateGroupName () {
      let selectedConversation = this.$store.state.selectedConversation
      console.log('updateGroupName 1')
      if (selectedConversation.comment !== this.groupName) {
        console.log('updateGroupName 2')
        let params = new URLSearchParams()
        params.append('name', this.groupName)
        params.append('id', selectedConversation.id)
        this.axios.post('/api/v1/group/updateGroupInfo', params).then((response) => {
          if (response.data.code === 1) {
            selectedConversation.comment = this.groupName
            this.$store.commit('updateConversation', selectedConversation)
          } else {
            this.$message.error(response.data.message)
            console.error(response.data.message)
          }
        }).catch((error) => {
          this.$message.error(error)
          console.error(error)
        })
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.group-info
    position absolute
    top 55px
    left 50%
    transform translateX(-50%)
    width 300px
    z-index 100
    background-color white
    padding 10px
    border 1px solid #b8b7b7
    &-mid
      &-member
        overflow hidden
        &-item
          float left
          margin 10px
          &>img
            width 40px
      &-control
        display flex
        &-add,&-delete
          width 40px
          height 40px
          line-height 40px
          margin 0 10px
          font-size 20px
          text-align center
          border 1px solid #dbdbdb
          border-radius 3px
          cursor pointer

</style>
